<template>
  <div>
    <van-slider
      v-model="value"
      active-color="#909799"
      :min="4"
      :max="20"
      bar-height="10px"
    >
      <template #button>
        <div class="custom-button">{{ value }}</div>
      </template>
    </van-slider>
    <div class="date">
      <p>滑动选择旅行周期：</p>
      {{ value }}天
    </div>
    <!-- <van-button round type="info" plain @click="nextPage" color="#455357">下一步</van-button> -->
  </div>
</template>

<script>
import Vue from "vue";
import { Slider, Toast, Button } from "vant";

Vue.use(Slider);
Vue.use(Button);

export default {
  data() {
    return {
      value: 4,
    };
  },
  methods: {
    onChange(value) {
      Toast("当前值：" + value);
    },
    // nextPage() {
    //     // console.log(this.value);
    //     // 跳转到Prefer页面
    //     this.$router.push("/process/prefer")
    //     this.$store.commit('Rational/setindex',this.value)
    //     console.log(this.$store.state.Rational.pro_index);
    // }
  },
  watch: {
    value() {
      this.$store.commit("rational/setday", this.value);
      console.log(this.$store.state.rational.day);
    },
  },
};
</script>

<style >
.custom-button {
  width: 30px;
  color: #fff;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  background-color: #455357;
  border-radius: 100px;
}
.van-slider {
  width: 290px;
  margin-left: 34px;
  margin-top: 125px !important;
}
.date {
  font-size: 22px;
  text-align: center;
  font-weight: bold;
  color: #455357;
}
.van-button--plain.van-button--info {
  margin-left: 40%;
  margin-top: 30px;
}
/* .van-button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #000;
  border: inherit;
  border-color: #000;
  border-radius: inherit;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  content: " ";
} */
</style>